/*
 * 通知组件
 */
<template name="ys-notices">
    <swiper class="notices" vertical=1 autoplay=1 interval="3000" duration="500" circular=1>
        <swiper-item v-for="(item, index) in list" :key="index">
            <view class="notice">{{item.title}}</view>
        </swiper-item>                
    </swiper>
</template>

<script>
    export default {
        name: "ys-notices",
        props: {
            list: {
                type: Array,
                default: () => []
            }
        },
        mounted() {
           this.$store.commit("addGql",`
query{
  notices{
    id
    from_uid
    to_uid
    tpl_id
    content
    send_time
    read_time
    title
  }
}`)
           console.log("notice mounted")
        }
    }
</script>

<style lang="scss">
    .notices {
        background:#f5f5f5 url('') 30rpx center no-repeat;
        background-size:28upx 26upx;        
        width: 100%;
        height: 66upx;
        overflow: hidden;
        padding-left: 70upx;
        padding-right: 30upx;
        box-sizing: border-box;        
        .notice {
            height: 100%;
            font-size: 24upx;
            line-height: 66upx;
            color: #333;
            transition: margin-top 300ms linear;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;            
        }
    }
</style>
